<template>
    <el-dialog
        id="memo"
        :title="'Memo'"
        v-model="visible"
        width="400px"
    >
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="formRef"
            label-width="80px"
            class="from"
        >
            <el-form-item label="Memo:" prop="memo">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 6, maxRows: 6}"
                    placeholder="请输入内容"
                    v-model.trim="ruleForm.memo">
                </el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'

export default defineComponent({
    name: 'Memo',
    props: {
        submit: Function
    },
    setup(props) {
        const formRef = ref();
        const states = reactive({
            visible: false,
            ruleForm: {
                memo: ''
            },
            rules: {
                memo: [
                    {
                        required: 'true',
                        message: '内容不能为空',
                        trigger: ['change', 'blur']
                    }
                ]
            }
        });

        const open = () => {
            states.ruleForm.memo = '';
            states.visible = true;
        }

        const close = () => {
            states.ruleForm.memo = '';
            states.visible = false;
        }

        const submitForm = () => {
            formRef.value.validate((valid) => {
                if (valid) {
                    props.submit && props.submit(states.ruleForm)
                }
            })
        }

        return {
            ...toRefs(states),
            open,
            close,
            submitForm,
            formRef
        }
    },
})
</script>

<style lang="scss" scoped>
#memo .el-dialog__body {
    padding-bottom: 0 !important;
}
</style>